<div id="storage-report" class="content-margin">
    <!-- ko if: node().internalChildren.length !== 0 -->
        <div id="storage-report-container" data-bind="css: { 'processing': showLoader() }">
            <div class="chart-tooltip tooltip tooltip-inner" style="opacity: 0">
            </div>
            <div class="chart"></div>
        </div>
        <div class="current-path">
            <span data-bind="foreach: currentPath">
                <a href="#" data-bind="click: _.partial($root.onClick, $data, false)">
                    <span data-bind="text: name"></span>
                </a>
                <i data-bind="visible: $index() < $root.currentPath().length - 1" class="icon-arrow-filled-right"></i>
            </span>
        </div>
        <table class="table table-condensed table-striped on-base-background margin-top margin-top-sm" data-bind="if: node() && node().internalChildren">
            <thead>
                <tr>
                    <th class="column-min-width">Range</th>
                    <th>Non-empty buckets count</th>
                    <th>Documents count</th>
                    <th>Shards</th>
                    <th>Size (&sum; <span data-bind="text: node().formatSize()"></span>)</th>
                    <th>% Total</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: node().internalChildren">
                <tr>
                    <td class="position-relative">
                        <div class="table-items">
                            <a href="#" class="table-item-name text-elipsis" data-bind="text: name, click: _.partial($root.onClick, $data, true), visible: hasChildren(), attr: { title: name }"></a>
                            <span href="#" class="table-item-name text-elipsis" data-bind="text: name, visible: !hasChildren(), attr: { title: name }"></span>
                        </div>
                    </td>
                    <td data-bind="text: numberOfBuckets.toLocaleString()"></td>
                    <td data-bind="text: documentsCount.toLocaleString()"></td>
                    <td>
                        <!-- ko foreach: shards -->
                            <span class="label label-primary" data-bind="text: '#' + $data">
                            </span>
                        <!-- /ko -->
                    </td>
                    <td data-bind="html: formatSize(false)"></td>
                    <td data-bind="text: formatPercentage($parent.node().size)"></td>
                    <td>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
                                <span>Move to</span> <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" data-bind="foreach: $root.shardNumbers">
                                <li>
                                    <a href="#" data-bind="click: _.partial($root.moveToDifferentShard, $parent, $data)">
                                        Shard #<span data-bind="text: $data"></span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <div data-bind="visible: showBucketContents">
            <h3>Items stored in this bucket:</h3>
            <div class="margin-bottom" style="position: relative; height: 50vw">
                <virtual-grid style="height: 50vw" class="resizable flex-window" params="controller: gridController"></virtual-grid>
            </div>
        </div>
    <!-- /ko -->
    <!-- ko if: node().internalChildren.length === 0 -->
        <div class="text-center mb-2"><i class="icon-xl icon-empty-set text-muted"></i><div class="lead">The bucket list is empty</div></div>
    <!-- /ko -->
</div>
